<template>
	<cl-drawer
		ref="drawer"
		:props="{
			title: title + '部门',
			size: '30%'
		}"
		show-confirm
		confirm-text="提交"
		@close="reset"
		@confirm="submit"
		:saving="saving"
	>
		<el-form ref="form" label-position="top" :disabled="saving" :model="form" :rules="rules">
			<el-form-item label="基本信息">
				<el-card shadow="never">
					<el-form-item label="所属事业部" prop="biz_id">
						<el-select
							v-model="form.biz_id"
							style="width: 100%"
							placeholder="请选择事业部"
							filterable
							:disabled="type == 'edit'"
							@change="bizChange"
						>
							<el-option
								v-for="item in bizList"
								:key="item.biz_id"
								:label="item.biz_name"
								:value="item.biz_id"
							/>
						</el-select>
					</el-form-item>
					<el-form-item label="分公司" prop="company_id">
						<el-select
							v-model="form.company_id"
							placeholder="请选择分公司"
							filterable
							style="width: 100%"
						>
							<el-option
								v-for="item in companyList"
								:key="item.company_id"
								:label="item.company_name"
								:value="item.company_id"
							/>
						</el-select>
					</el-form-item>
					<el-form-item label="品牌" prop="bra_id">
						<cl-select
							v-model="form.bra_id"
							placeholder="请选择品牌"
							filterable
							style="width: 100%"
						>
							<el-option
								v-for="item in bizRefData.brand"
								:key="item.bra_id"
								:label="item.bra_name"
								:value="item.bra_id"
							/>
						</cl-select>
					</el-form-item>
					<el-form-item
						label="部门名称"
						required
						v-if="type == 'add'"
						style="margin-bottom: 0"
					>
						<el-form-item
							v-for="(item, index) in form.dept_name_list"
							:prop="`dept_name_list.${index}.dept_name`"
							:rules="rules.dept_name"
							:key="item.uuid"
						>
							<el-input v-model="item.dept_name" placeholder="请填写部门名称">
								<template #append>
									<el-button
										icon="el-icon-plus"
										@click="addDeptName"
										v-if="form.dept_name_list.length == index + 1"
									/>
									<el-button
										icon="el-icon-minus"
										v-else
										@click="delDeptName(index)"
									/>
								</template>
							</el-input>
						</el-form-item>
					</el-form-item>
					<el-form-item label="部门名称" prop="dept_name" v-else>
						<el-input v-model="form.dept_name" placeholder="请填写部门名称" />
					</el-form-item>
					<el-form-item
						label="上级部门"
						prop="parent_id"
						v-if="type == 'add' || form.parent_id"
					>
						<el-select
							v-model="form.parent_id"
							placeholder="请选择上级部门"
							filterable
							style="width: 100%"
							@change="changeDept"
						>
							<template v-for="item in deptList">
								<el-option
									v-if="item.dept_id != form.dept_id"
									:key="item.dept_id"
									:label="item.dept_name"
									:value="item.dept_id"
								/>
							</template>
						</el-select>
					</el-form-item>
					<el-form-item label="部门类型" prop="post" v-if="!form.parent_id">
						<el-select
							v-model="form.post"
							style="width: 100%"
							placeholder="请选择部门类型"
						>
							<el-option
								v-for="(item, index) in $const.DEPT_TYPE"
								:key="index"
								:label="item.label"
								:value="item.value"
							/>
						</el-select>
					</el-form-item>
					<el-form-item label="排序" prop="px">
						<el-input v-model.number="form.px" placeholder="请填写部门排序" />
					</el-form-item>
				</el-card>
			</el-form-item>
		</el-form>	
	</cl-drawer>
</template>
<script>
import { uuid } from "@/utils";

export default {
	data() {
		return {
			form: {
				dept_id: "",
				dept_name_list: [],
				dept_name: "", // 部门名称
				parent_id: "", // 父级id
				biz_id: "", //事业部id
				company_id: "", //分公司
				bra_id: "",
				post: "", // 部门类型
				status: "",
				px: "",
			},
			rules: {
				dept_name: [{ required: true, message: "请填写部门名称" }],
				biz_id: [{ required: true, message: "请选择事业部" }],
				company_id: [{ required: true, message: "请选择分公司" }],
				// bra_id: [{ required: true, message: "请选择分公司" }],
				post: [{ required: true, message: "请选择部门类型" }],
				px: [{ required: true, message: "请填写部门排序" }]
				// sign: [{ required: true, message: "请填写部门标识" }],
				// webhook_url: [{ required: true, message: "请填写webhook地址" }]
			},
			saving: false,
			type: "add",
			// 分公司
			companyList: [],
			// 上级部门
			deptList: []
		};
	},
	computed: {
		bizRefData() {
			const { biz_id } = this.form;
			return this.getBizRefData(biz_id);
		},
		title() {
			let title = "";
			switch (this.type) {
				case "add":
					title = "新增";
					break;
				case "edit":
					title = "修改";
					break;
				case "copy":
					title = "复制";
					break;
			}
			return title;
		}
	},
	created() {
		this.form.biz_id = this.getCurrBiz(true);
		this.bizChange();
	},
	methods: {
		open(type = "add", data = {}) {
			this.type = type;
			this.$refs.drawer.create(() => {
				this.reset();
				if (type == "add") {
					this.addDeptName();
				}
				if (type != "add") {
					this.getDetail(data);
				}
				this.bizChange();
			});
		},
		// 获取详情
		async getDetail({ dept_id }) {
			const res = await this.$service.dept.single({ dept_id });
			Object.keys(this.form).forEach(key => {
				res[key] != undefined && (this.form[key] = res[key]);
			});
			this.form.parent_id = res.parent_id ? res.parent_id : "";
			if (this.form.biz_id) {
				this.getCompanys();
				this.getDeptList();
			}
		},

		close() {
			this.$refs.drawer.close();
		},
		reset() {
			this.saving = false;
			this.form = {
				dept_id: "",
				dept_name_list: [],
				dept_name: "", // 部门名称
				parent_id: "", // 父级id
				biz_id: this.getCurrBiz(true), //事业部id
				company_id: "", //分公司
				post: "", // 部门类型
				status: "",
				px: "",
				bra_id: ""
			};
			// this.form.dept_name_list = [];
			this.$refs.form.resetFields();
		},
		submit() {
			this.$refs.form.validate(async (valid, errors) => {
				this.showFormErr(errors);
				if (!valid) return;
				this.saving = true;
				const { type } = this;

				const { dept_name_list, dept_id, parent_id, biz_id, ...args } = this.form;
				let form = {
					...args,
					biz_id,
					parent_id: parent_id ? parent_id : 0
				};
				if (type == "add") {
					form.dept_name = dept_name_list.map(v => v.dept_name).join();
				}
				if (type == "edit") {
					form.dept_id = dept_id;
				}
				await this.$service.dept[type == "edit" ? "update" : "add"](form).done(() => {
					this.saving = false;
				});
				this.$message.success("操作成功");
				this.$emit("confirm", biz_id);
				this.close();
			});
		},
		// 事业部
		bizChange(v) {
			this.form.parent_id = "";
			this.form.company_id = "";
			this.form.bra_id = "";
			const { biz_id } = this.form;
			this.getBizRefBrand(biz_id);
			this.getCompanys();
			this.getDeptList();
		},
		//获取分公司标签
		async getCompanys() {
			const { biz_id, parent_id } = this.form;
			this.companyList = [];
			if (!biz_id) return;
			const data = await this.$service.company.list({
				biz_id,
				dept_id: parent_id
			});
			this.companyList = data;
		},
		// 上级部门
		async getDeptList() {
			const { biz_id } = this.form;
			this.deptList = [];
			if (!biz_id) return;
			const data = await this.$service.dept.list({
				biz_id,
				parent_id: 0
			});
			this.deptList = data || [];
		},
		changeDept() {
			const { parent_id } = this.form;
			this.getCompanys();
			let curr = this.deptList.find(v => v.dept_id === parent_id);
			if (curr) {
				this.form.post = curr.post;
			}
		},
		addDeptName() {
			this.form.dept_name_list.push({
				uuid: uuid(),
				dept_name: ""
			});
		},
		delDeptName(index) {
			this.form.dept_name_list.splice(index, 1);
		}
	}
};
</script>
